import React, { memo, useState } from 'react'
import { Input } from 'antd-mobile'
import { Button, Modal, Space, Toast, Divider } from 'antd-mobile'
const Todo = memo(() => {
    const [res,setres]=useState([
        {id:1,name:'马踏祁连山河动，兵起玄黄奈何天',isDone:false},
        {id:2,name:'联九州之黎庶，憾一家之王庭',isDone:true},
        {id:3,name:'宁可战死失社稷，绝不拱手让江山',isDone:false},
])
  const [value, setValue] = useState('')

//   全选
  const checkAll=(check)=>{
    setres( res.map(item=>{item.isDone=check;return item}))
  }
//   反选
  const checkOne=(id)=>{
   
    setres(res.map(item=>{
        if(item.id==id){
            item.isDone=!item.isDone
        }
        return item
    }))
  }
// 删除
   const del=(id)=>{
    setres(res.filter(item=>item.id!==id))
   }
  return (
    
    <div>
              <Input
          placeholder='请输入内容'
          value={value}
          onChange={val => {
            setValue(val)
          }}
        />
        {res.map(item=>(
            <div key={item.id}><input type="checkbox" checked={item.isDone} onChange={()=>checkOne(item.id)}/>   {item.name} 
            <Button
            className='btn'
            block
            onClick={() => {
              Modal.alert({
                title: '删除',
                content: '确定要删除吗',
                showCloseButton: true,
              });del(item.id)
            }}
          >
            删除
          </Button></div>
        ))}
        <p>已完成{res.filter(item=>item.isDone).length}/全部{res.length} </p>
        <input type="checkbox" name="" id=""  onChange={(e)=>checkAll(e.target.checked)} checked={res.every(item=>item.isDone)}/>
        <button>已完成</button>
        <button>未完成</button>
        <button>全部</button>
        <button>回收站</button>
        
    </div>
  )
})

export default Todo